import {defineStore} from 'pinia'
import axios from 'axios'
import {reactive,ref,onMounted} from 'vue'
import { useRouter } from 'vue-router';
  interface ImageRwaStore{
    id:number,
    user:number,
    isTemplate:number,
    isPublic:number,
    isHot:number,
    copiedCount:number,
    desc:string,
    createdAt:string,
    coverImg:string,
    author:string, 
    title:string,
  }
export const useCounterStore = defineStore('home', () => {
    const ImageList = reactive<ImageRwaStore[]>([
     {
       id:0,
      user:0,
      isTemplate:0,
      isPublic:0,
      isHot:0,
      copiedCount:0,
      desc:'',
      createdAt:'',
      coverImg:'',
      author:'', 
      title:'',
     }
    ])
    const currentPage = ref(0) 
    const router = useRouter()
    const getImage=()=>{
    const config ={
        url:'/api/v2/templates',
        method:'get',
        params:{
        pageIndex:currentPage.value,
        pageSize:5
        }
    }
    axios(config).then(res=>{
     console.log(res)
     const {data} = res
     data.data.list.forEach((item:any)=>{
      ImageList.push(item as never)
      localStorage.setItem('id',JSON.stringify(item.id))
    })
  }).catch(err=>{
    console.log(err)
  })
}
const handerAdd=()=>{
  currentPage.value++
  getImage()
}

onMounted(()=>{
  getImage()
})

    return{
        ImageList,
        handerAdd,
    }
})
